import React, { useState } from 'react';
import { Row, Col, Card, Button, Typography, Divider } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import PromptModal from '@/components/MyPrompts/PromptModal';
import PromptCard from '@/components/MyPrompts/PromptCard';
import ImportModal from '@/components/MyPrompts/ImportModal';

const { Title } = Typography;

const MyPrompts = () => {
  const [showModal, setShowModal] = useState(false);
  const [showImportModal, setShowImportModal] = useState(false);

  // Sample prompt data
  const prompts = [
    {
      title: "Article Optimizer",
      content: "Modify document format, combine image content with text, use appropriate language and image formats based on titles and colors.",
      date: "2024-01-15"
    },
    {
      title: "React Component Debugger",
      content: "Debug React components, analyze code, identify issues, and provide shortcuts.",
      date: "2024-02-05"
    },
    {
      title: "Technical Doc Generator",
      content: "Create professional technical documentation with data lines, application examples, API tables, and program management features.",
      date: "2024-03-10"
    }
  ];

  return (
    <div>
      <Row justify="space-between" align="middle" style={{ marginBottom: 20 }}>
        <Col>
          <Title level={2}>My Prompts</Title>
        </Col>
        <Col>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => setShowModal(true)}
            style={{ marginRight: 10 }}
          >
            New Prompt
          </Button>
          <Button onClick={() => setShowImportModal(true)}>Import</Button>
        </Col>
      </Row>

      <Divider />

      <Row gutter={[16, 16]}>
        {prompts.map((prompt, index) => (
          <Col key={index} xs={24} sm={12} md={8} lg={6}>
            <PromptCard {...prompt} />
          </Col>
        ))}
      </Row>

      <PromptModal visible={showModal} onClose={() => setShowModal(false)} />
      <ImportModal visible={showImportModal} onClose={() => setShowImportModal(false)} />
    </div>
  );
};

export default MyPrompts;
